<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>NewVideo</title>

<!-- TODO : Common API -->
<script type="text/javascript" language="javascript"
	src="$MANAGER_WIDGET/Common/API/Widget.js"></script>
<script type="text/javascript" language="javascript"
	src="$MANAGER_WIDGET/Common/API/TVKeyValue.js"></script>
<script type="text/javascript" language="javascript"
	src="$MANAGER_WIDGET/Common/webapi/1.0/webapis.js"></script>
<script type="text/javascript" language="javascript"
	src="app/javascript/jquery-2.1.1.min.js"></script>
<script type="text/javascript" language="javascript"
	src="app/javascript/jquery-ui.js"></script>

<!-- TODO : Javascript code -->
<script language="javascript" type="text/javascript"
	src="app/javascript/Main.js"></script>

<!-- TODO : Style sheets code -->
<link rel="stylesheet" href="app/stylesheets/jquery-ui.css" type="text/css">
<link rel="stylesheet" href="app/stylesheets/Main.css" type="text/css">

<!-- TODO: Plugins -->

</head>

<body onload="Main.onLoad();" onunload="Main.onUnload();">

	<!-- Dummy anchor as focus for key events -->
	<a href="javascript:void(0);" id="anchor" onkeydown="Main.keyDown();"></a>

	<!-- TODO: your code here -->
	<div id="container">
		<div id="videoPanel">
			
		</div>
		<div id="ticker">
			<div id="img_thumbnail">
				<img id="img_thumbnail_1" alt="image" src="" width="50px"
					height="50px;" />
			</div>
			<div id="ticker_product_description"></div>
		</div>
		<div id="rightpane">
			<div id="product_details">
				PRODUCT DETAILS
			</div>
			<div id="product-middle-container">
				<div id="leftswipe">
					<img alt="" src="app/images/previous.png" />
				</div>
				<div id="product_image">
					<img id="image_big" alt="IMAGE" src="app/images/samplethumbnail.png" width="250px" height="250px"/>
				</div>
				<div id="rightswipe">
					<img alt="" src="app/images/next.png" />
				</div>
			</div>
			<div id="product_price">
			</div>
			<div id="product_description">
				Hello, This is a sample description about the product. This is a sample description about the product. This is a sample description about the product.
			</div>
		</div>
		<div id="bottomPane">
			<div id="back_button">
				<a href="javascript:void(0);">BACK</a>
			</div>
			<div id="wishlist_button">
				<a href="javascript:void(0);">ADD TO CART</a>
			</div>
			<div id="addtocart_button">
				<a href="javascript:void(0);">BUY NOW</a>
			</div>
		</div>
	</div>
	
	<!-- add to cart page html -->
	<div id="addtocart_container">

		<div id="cart_items">
			<div class="cart_items_header">
				<h1>Your Cart Items</h1>
			</div>
			<div id="list_cart">			
			
			</div>			
		</div>

		<div id="shipping_details">
			<div class="shipping_details_header">
				<h3>Shipping Details</h3>
			</div>
			<div id="addressList">
			
			</div>
		</div>

		<div id="payment_details">
			<div class="payment_details_header">
				<h3>Payment Details</h3>
			</div>
			<div>
				<div class="card"> 
					<div class='cardnumber'>
						<div class='cardnumberlabel'> CARD NUMBER </div>
						<div class='cardnumbervalue'> 4080 XXXX XXXX XXXX</div>
					</div>
					
					<div class='expirydate'>
						<div class='expirydatelabel'> EXPIRY DATE </div>
						<div class='expirydatevalue'> 09/2021 </div>
					</div>
					
					<div class='cvv'>
						<div class='cvvlabel'> ENTER CVV</div>
						<div class='cvvvalue'>  XXX </div>
					</div>
				</div>
				<div id="paymentAmount">
				
				</div>
			</div>
			<div id="payButton">
				PAY
			</div>
		</div>

		<div id="addtocart_footer">
			Copyrights &copy; Avnet Inc., Chennai
		</div>
	</div>

	<div id="dialog-confirm" title="Hey.,">
		<p>
			<span class="ui-icon ui-icon-alert"
				style="float: left; margin: 0 7px 20px 0;"></span>Product has been added to cart !
				<a href="javascript:void(0);" id="anchor1" onkeydown="Main.keyDown();"></a>
		</p>
	</div>

</body>
</html>
